<template>
  <div id="myExam">
    <div class="title"></div>
    <div class="wrapper">
      <ul class="top">
        <li class="order">考试安排</li>
        <li class="search-li">
          <div class="icon"><input type="text" placeholder="" class="search" v-model="key"></div>
        </li>
        <li><el-button type="primary" @click="search()">搜索</el-button></li>
      </ul>
      <el-table :data="pagination.records" stripe style="width: 100%" fit>
        <el-table-column prop="source" label="课程名" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="totalTime" label="考试时间" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="totalScore" label="考试总分" min-width="100" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="toExamMsg(scope.row.examCode)" type="text" size="medium">查看</el-button>
          </template>
        </el-table-column>
      </el-table>


      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.current" :page-sizes="[2, 5, 10, 20]" :page-size="pagination.size"
          layout="total, sizes, prev, pager, next" :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        key: null, // 搜索关键字
        allExam: null, // 所有考试信息
        pagination: { // 分页后的考试信息
          current: 1, // 当前页
          total: null, // 记录条数
          size: 10 // 每页条数
        }
      }
    },
    created() {
      this.getExamInfo();
      this.loading = true;
    },
    methods: {
      // 获取当前所有考试信息
      getExamInfo() {
        this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res => {
          this.pagination = res.data.data;
          this.loading = false;
        }).catch(error => {
          console.log(error);
        });
      },
      // 改变当前记录条数
      handleSizeChange(val) {
        this.pagination.size = val;
        this.getExamInfo();
      },
      // 改变当前页码，重新发送请求
      handleCurrentChange(val) {
        this.pagination.current = val;
        this.getExamInfo();
      },
      // 搜索试卷
      search() {
        this.$axios('/api/exams').then(res => {
          if (res.data.code == 200) {
            let allExam = res.data.data;
            let newPage = allExam.filter(item => {
              return item.source.includes(this.key);
            });
            this.pagination.records = newPage;
          }
        });
      },
      // 跳转到试卷详情页
      toExamMsg(examCode) {
        console.log(examCode)
        this.$router.push({ path: '/examMsg', query: { examCode: examCode } });
      }
    }
  }
</script>

<style lang="less" scoped>
  .pagination {

    padding: 20px 0px 30px 0px;
    align-items: center;
    display: flex;
      justify-content: center;

    .el-pagination {

      align-items: center;
      display: flex;
      justify-content: center;
    }
  }

  .paper {
    h4 {
      cursor: pointer;
    }
  }

  .paper .item a {
    color: #000;
  }



  .wrapper .top .order {
    cursor: pointer;
  }

  .wrapper .top .order {
    cursor: pointer;
    font-size: 18px;
    /* 设置字体大小为18像素 */
    font-weight: bold;
    /* 设置字体加粗 */
    color: #555;
    /* 设置字体颜色 */
    margin-left: 20px;
    /* 向右移动 20 像素 */

  }

  .wrapper .top .order:hover,
  .wrapper .top .order:visited {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
  }

  .item .info i {
    margin-right: 5px;
    color: #0195ff;
  }

  .item .info span {
    margin-right: 14px;
  }

  .paper .item {
    border-bottom: 1px solid #eee;
    padding: 18px 20px;
  }

  .paper .item h4 {
    margin-bottom: 5px;
  }

  .paper .item .info {
    font-size: 14px;
    color: #88949b;
  }

  .paper .item .info i {
    margin-right: 5px;
  }

  .paper * {
    margin: 0;
  }

  .wrapper .paper {
    padding: 0;
  }

  .top .el-icon-search {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .top .icon {
    position: relative;
  }

  .wrapper .top {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  #myExam .search-li {
    margin-left: auto;
  }

  .top .search-li {
    margin-left: auto;
  }

  .top li {
    display: flex;
    align-items: center;
  }

  .top .search {
    margin-left: auto;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid black;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .top .search:hover {
    color: #0195ff;
    border-color: #0195ff;
  }

  .wrapper .top {
    display: flex;
  }

  .wrapper .top li {
    margin: 20px;
  }

  #myExam {
    width: 980px;
    height: 80vh;
    margin: 0 auto;
    opacity: 0.8;
    /* 设置透明度为 0.7，即 70% 不透明 */
  }

  #myExam .title {
    margin: 50px;
  }

  #myExam .wrapper {
    background-color: #eee;
  }
</style>